<script setup lang="ts">

import UsercordList from "@/components/UsercordList.vue";
import {getRecommendUser, matchsimilarUser} from "@/api/user.ts";
import {onMounted} from "vue";
import {ref} from "vue";
import {useRouter} from 'vue-router'
import {showFailToast, showToast} from "vant";
const router = useRouter()
onMounted(() => {
  getRecommendUser().then((res) => {
    const result = res.data.data.records
    userList.value = result
  }).catch((err) => {});
});
const onclickright = () =>{
  router.push("/Searchpage")
}
const userList = ref([]);

const show = ref(false);
const match = () => {
  show.value =true
  showToast("正在为你匹配相似用户")
  matchsimilarUser(5).then((res) => {
    if(res.data.data){
      userList.value = res.data.data;
    }
    else {
      showFailToast(res.data.description)
      router.push("/tagSelect")
    }

    show.value = false;

  }).catch((err) => {})
}
</script>

<template>
  <van-search v-model="value" placeholder="搜索标签"  @click="onclickright"/>
<!--  <div style="display: flex; justify-content: space-between;">-->
<!--    <van-icon name="friends-o" size="7vw" color="#2B95EF" @click="match()"/>-->
<!--    <van-icon name="search" size="7vw" color="#2B95EF" @click="onclickright"/>-->
<!--  </div>-->
  <van-button  class="add-button" type="primary" icon="friends-o" @click="match()"/>
  <van-loading size="24px" v-if="show">匹配用户中...</van-loading>
  <usercord-list :UseList="userList"/>
</template>

<style scoped>

</style>